﻿<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="author" content="陈旭光，Chen XuG,chenxvguang1991@163.com">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
	<title>flappy bird</title>
	<style type="text/css">
	   *{margin: 0;padding: 0}
	   body{background: #AEEEEE}
	   #gameArea{width: 288px;height:512px;position: relative;margin: 0 auto;background:url(img/bg_day.png) repeat-x; }
         #load{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:4;}
         #replay{display: none; position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:4;}
         #getReady{display: block;width: 196px;height: 62px;position: absolute;top: 100px;left: 46px;}
         #tutorial{display: block;width: 114px;height: 96px;position: absolute;top: 180px;left: 87px}
         #replayBtn,#playBtn{display: block;width: 116px;height: 70px;position: absolute;top: 300px;left: 86px;cursor: pointer;}
         #game0{position:absolute;top:0;left:0;z-index: 1}
         #game1{position:absolute;top:0;left:0;z-index: 2}
         #land{position: absolute;bottom: 0;left:0;width: 288px;height: 112px;background: url(img/land.png) repeat-x;z-index:3 }
	</style>
</head>
<body>
              
               <div id='gameArea'>

                   <div id='load'>
                   <img  id='getReady' src='img/getready.png'>
                   <img  id="tutorial"  src="img/tutorial.png">
                   <img  id='playBtn' src="img/button_play.png">
                   </div>
               	<canvas id='game0' width=288 height=512></canvas>
                  <canvas id='game1' width=288 height=512></canvas>
                   <div id='land'></div>
                   <div id='replay'><img  id='replayBtn' src="img/button_play.png"></div>
                   
               </div>
               <script type="text/javascript" src='main.js'></script>
</body>
</html>
